<template>
  <Row style="padding: 10px;">
    <Col span="24" order="2">
      <Form ref="formInline" inline :style="{'padding-top': '20px'}">
        <FormItem>
          <Input type="text" placeholder="角色名称" size="large" style="width: 300px" clearable v-model="search_name">
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="loadTableData" size="large">查询</Button>
        </FormItem>
      </Form>

      <Button type="info" icon="android-add-circle" shape="circle"
              @click="add_role">增加
      </Button>

      <role_table
        :column_header="column_header"
        :table_data="table_data"
        :total_page="total_page"></role_table>

      <Page :total="total_page"
            class="page_class"
            @on-change="change"
            @on-page-size-change="change"></Page>
    </Col>
  </Row>
</template>
<script>
  import role_table from '../utils/table_components_util'

  export default {
    data() {
      return {
        column_header: [
          {
            title: '名称',
            key: 'name',
            align: 'left',
            sortable: true
          },
          {
            title: '描述',
            key: 'comment',
            align: 'left'
          },
          {
            title: '创建人',
            key: 'creator',
            align: 'left',
            width: 170
          },
          {
            title: '创建日期',
            key: 'create_time',
            align: 'left',
            width: 170,
            sortable: true
          },
          {
            title: '操作',
            key: 'handler',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'edit',
                    size: '20'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$emit('childClickMenu', '系统管理', '角色管理', 'role_edit', {"id": params.row.id});
                    }
                  }
                }),
                h('Icon', {
                  style: {
                    cursor: 'pointer'
                  },
                  props: {
                    type: 'trash-a',
                    size: '20'
                  },
                  on: {
                    click: () => {
                      const _this = this;
                      if (params.row.id == -1) {
                        this.$Notice.error({title: '警告', desc: '不可以删除管理员!'});
                        return;
                      }
                      this.$Modal.warning({
                        title: "注意",
                        content: "确定要删除数据吗？",
                        onOk: function () {
                          this.$Spin.show();
                          this.$http.delete(this.apiUrl() + 'role/delete/' + params.row.id, {
                            emulateJSON: true
                          }).then((response) => {
                            if (response.body.success) {
                              this.$Message.success(response.body.msg);
                              _this.loadTableData();
                            } else {
                              this.$Notice.error({title: '错误', desc: response.body.msg});
                            }
                          });
                        }
                      });
                    }
                  }
                })
              ]);
            }
          }
        ],
        table_data: [],
        total_page: 0,
        current_page: 1,
        search_name: '',
        qr_uuid: ''
      }
    },
    components: {
      role_table: role_table
    },
    created: function () {
      //开启动加载中，这里太慢了
      this.$Spin.show();
      //判断用户微信是否登录
      this.chat_islogined();
      //加载表格数据
      this.loadTableData();
    },
    methods: {
      add_role: function () {
        this.$emit('childClickMenu', '系统管理', '角色管理', 'role_edit', {"id": '0'});
      },
      /**
       * 点击分页，页数标签时调用的方法
       * @param page_num  页码改变的回调，返回改变后的页码
       */
      change: function (page_num) {
        this.current_page = page_num;
        this.loadTableData();
      },
      /**
       * 加载表格数据
       * @param page_num            查询条件：当前页
       * @param search_name         查询条件：角色名称
       */
      loadTableData: function () {
        this.$http.post(this.apiUrl() + "role/grid/", {
          current_page: this.current_page,
          search_name: this.search_name
        }, {
          emulateJSON: true
        }).then((response) => {
          if (response.body.success) {
            this.table_data = response.body.grid;
            this.total_page = response.body.total_count;
          }
        });
      },
      /**
       * 判断用户微信是否已经登录
       */
      chat_islogined: function () {
        const _this = this;
        this.$http.get(this.apiUrl() + "chat/chatlogged/", {}, {
          emulateJSON: true
        }).then((response) => {
          if (response.body.success == '200') {
            //表示用户已经登录，那么先这样
            this.$Spin.hide();
          } else {
            //表示用户未登录，应该弹出一个modal，然后上面显示二维码
            console.info("访问二维码地址：" + _this.QRPicUrl(response.body.pic));
            this.$Modal.info({
              title: "扫码登录",
              content: "<img src='" + _this.QRPicUrl(response.body.pic) + "'></img>",
              width: 570,
              onOk: function () {
                _this.$Spin.show();
                _this.chat_islogined();
              }
            });
            this.$Spin.hide();
          }
        });
      }
    }
  }
</script>
<style scoped>
  /*
    表格分页工具条的样式
   */
  page_class {
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
